import { useEffect, useState } from 'react'
import { useNavigate, Outlet } from 'react-router-dom'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $, $http, $config } = window
/* -------------------------------------------------------- Async Component -- */
import BackupMysqlDatabase from '../table/_config/backup-mysql-database'
import ImportMysqlSQL from '../table/_config/import-mysql-sql'
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
const className = 'nosel cp abs_full fxm pl5'
const isNative = $config.isNative
/* -------------------------------------------------------- Page Component -- */
const Component = () => {
	const navigate = useNavigate()
	
	const [info, setInfo] = useState({ title:'', database:'', folder:'' })
	useEffect(()=>{
		$http.pull(null, 'project/info', { loading:true }).then( d => {
			if(d) setInfo(d)
		} )
	},[])
	const dis = [
		'sys', 
		'notes','jzer', 'stream', 
		'gd', 'gd_test', 
		'wuye', 'wuye_test'
	]
	
	const addConfig = {
		modal: {
			addTitle: '创建数据库',
			width 		: '35%',
		},
		form: {
			labelWidth 	: 's6',
			api: 'mysql/database/add',
			param: { dbname: info.database },
			data: [
				{ label: '数据库名称',		name: 'database', 		r:1, maxLen:15 },
			]
		}
	}
	
	const config = {
		page : {
			title: '数据库管理' + `${ info.database ? ' - ' + info?.title + ' - ' + info?.database : '' }`,
			controls	: [
				// { mode:'del', onOk, abs:0, way:'post', param:{ database } }
				!isNative ? null : { label:'导入 SQL', mode:'formModal', ghost:1, isKeys:1, config:({ keys }) => ImportMysqlSQL({ database:keys } )},
				!isNative ? null : { label:'备份数据库', mode:'formModal', ghost:1, isKeys:1, config:({ keys }) => BackupMysqlDatabase({ backup:info.backup, database:keys } )},
				{ mode:'add' },
				{ mode:'refresh' }
			]
		},
		// 搜索配置
		// search : {
		// 	data:[
		// 		{ label:'数据库名称', 	name:'database' },
		// 	],
		// },
		// 表格配置
		table: {
			api 		: 'mysql/database',
			delApi 		: 'mysql/database/del',
			paging 		: 0,
			max 		: 1000,
			idStr 		: 'Database',
			row 		: isNative ? { type:1 } : null,
			addConfig,
			setName 	: ({ Database }) => ({ dis: dis.includes(Database) }),
			// setData 	: d => d.filter(v => ['information_schema', 'performance_schema'].includes(v.Database)),
			cols		: [
				{ title: '表', 			dataIndex: 'Database', render: t => {
					return (
						<div className={className} onClick={e=>{ e.stopPropagation();$.pushNext(navigate, '/table', { d:t })}}>
							<b className='ar f13'>{t}</b>
						</div>
					)
				} },
			],
			controls 	: isNative ? {
				width 	: 220,
				data: ({ dis, Database }) => [
					{ mode:'delPop', label:'删除', abs:0, disabled: dis, way:'put', param:{ dbname:info.database, database:Database } },
					// { label:'备份数据库', mode:'formModal', config:BackupMysqlDatabase({ backup:info.backup, database:Database } ) },
					{ label:'数据迁移', toNext:'/migration', param: { database:Database } },
				]
			} : null
		}
	}
	return <><SearchTable {...config}/><Outlet /></>
}
export default Component